import router from '@/router'
import store from '@/store'
// 所有的动态路由 [{}, {}, {}]
// import { asyncRoutes } from '@/router'

import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

// 将来我们希望 进入页面要一个进度条, nprogress
// 使用步骤
// 1.下载 yarn add nprogress => 已完成
// 2.引入相关 js css
// 3.使用  NProgress.start() 开启进度条 NProgress.done() 完成进度条

// 判断有无token
// 1. 有token
// 1.1 判断进 是登录页, 没有必要去登录, 引导去首页
// 1.2 不是登录页, 直接放行
// 2. 没有token
// 2.1 去的白名单(不需要登录也能进去 '/login' '/404'), 直接放行
// 2.2 去的不是白名单, 去登录页

// 白名单 => 装的都是不需要token也能进去的页面路由
const WHITE_LIST = ['/login', '/404']

// 路由前置守卫(只要是访问页面, 会先经过守卫)
router.beforeEach(async(to, from, next) => {
  NProgress.start()

  if (store.getters.token) {
    if (to.path === '/login') {
      next('/')
      // 拦截
      NProgress.done()
    } else {
      // 获取用户信息必须在next前面
      // 守卫必须知道你的权限菜单以后, 我才能放行
      // 调用获取用户信息的action
      // store.commit('mutation')  store.dospatch('action')
      // action异步的
      // store.dispatch('user/getUserInfo').then(() => {
      //   next()
      // })
      // 等一个异步操作结束以后, 要做某件事 => 封装promise

      // 通过分析, 我们知道 将来用户如果已经获取过用户信息了, 就不用发请求获取用户信息(没必要)
      // 将来我们如果发现已经有用户资料(vuex中有没有信息), 就不用发请求
      if (!store.state.user.userInfo.userId) {
        // 就表示用户信息为空 userInfo {}
        // console.log(store.dispatch('user/getUserInfo'))
        const res = await store.dispatch('user/getUserInfo')
        console.log(res, 999)
        // 在这里去添加对应的路由规则
        // 这里先做一件事, 先把所有的动态路由全部添加进来
        // router.addRoutes([{}, {}, {}, {}])

        // addRoutes之前应该要过滤一下路由规则,
        // 默认的规范, 只要你获取action里面的数据都要await
        // otherRoutes => 过滤出来的你能看的路由规则
        const otherRoutes = await store.dispatch('permission/filterRoutes', res.roles.menus)

        // 注意点: 动态添加路由, 异步,路由规则还没有添加完成
        router.addRoutes([
          ...otherRoutes,
          { path: '*', redirect: '/404', hidden: true }
        ])

        // 为了避免路由规则的问题, 固定语法
        // next({
        //   ...to,
        // })
        // next('/')
        // next({
        //   path: '/'
        // })

        // next() // 放行, 你该去哪 就去哪
        // next({
        //   path: to.path,
        //   params: to.params,
        //   query: to.query
        // })

        next({
          ...to,
          replace: true
        })
        return
      }
      next()
    }
  } else {
    // 没有token
    if (WHITE_LIST.includes(to.path)) {
      // 去的是白名单
      next()
    } else {
      // 去的是重要的地方(需要登录)
      next('/login')
      // 只要是被拦截走了, 我们就需要手动关闭
      NProgress.done()
    }
  }
})

// 路由后置守卫(只要进入到页面中, 会经过后置守卫 )
// 后置守卫的小注意点: 将来如果说是被拦截走的页面, 没有真正进入到页面中, 就不会触发后置守卫, 就不会关掉进度条
// 如何处理: 将来我们需要找到被拦截走的页面, 手动关掉进度条
router.afterEach((to, from) => {
  // setTimeout(() => {
  NProgress.done()
  // }, 300)
})

// permission 权限控制文件
// 拆模块 => 便于维护(页面多了以后)

// import router from './router'
// import store from './store'
// import { Message } from 'element-ui'
// import NProgress from 'nprogress' // progress bar
// import 'nprogress/nprogress.css' // progress bar style
// import { getToken } from '@/utils/auth' // get token from cookie
// import getPageTitle from '@/utils/get-page-title'

// NProgress.configure({ showSpinner: false }) // NProgress Configuration

// // 白名单: 不需要认证/登录的页面路由
// const whiteList = ['/login', '/404'] // no redirect whitelist

// // 路由前置守卫: 当前路由被真正访问之前, 会经过路由前置守卫
// // to: 去哪
// // from: 从哪来的
// // next: 放行
// router.beforeEach(async(to, from, next) => {
//   // start progress bar
//   NProgress.start()

//   // set page title
//   document.title = getPageTitle(to.meta.title)

//   // determine whether the user has logged in
//   // 获取token
//   const hasToken = getToken()

//   // 有没有token
//   // 1.没有token
//   // 1.1 访问不需要登录的页面, 给进next()
//   // 1.2 访问需要登录的页面, 不给进 => next('/login')

//   // 2.有token  next() 增强用户体验
//   // 2.1 去的是登录, 引导你去首页
//   // 2.2 去的不是登录, next()
//   if (hasToken) {
//     // 有token
//     if (to.path === '/login') {
//       // 去的登录页
//       // if is logged in, redirect to the home page
//       next({ path: '/' })
//       NProgress.done()
//     } else {
//       // 去的不是登录页面, 放行
//       const hasGetUserInfo = store.getters.name
//       if (hasGetUserInfo) {
//         next()
//       } else {
//         try {
//           // get user info
//           await store.dispatch('user/getInfo')

//           next()
//         } catch (error) {
//           // remove token and go to login page to re-login
//           await store.dispatch('user/resetToken')
//           Message.error(error || 'Has Error')
//           next(`/login?redirect=${to.path}`)
//           NProgress.done()
//         }
//       }
//     }
//   } else {
//     /* has no token*/
//     // 没有token

//     if (whiteList.includes(to.path)) {
//       // 你去的是不需要登录的页面 => 给进
//       // in the free login whitelist, go directly
//       next()
//     } else {
//       // 你去的是需要登录的页面  且 没有token => 登录页面
//       // other pages that do not have permission to access are redirected to the login page.
//       next(`/login?redirect=${to.path}`)
//       NProgress.done()
//     }
//   }
// })

// router.afterEach(() => {
//   // finish progress bar
//   NProgress.done()
// })
